<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/25 0025
  Time: 13:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="../js/jquery-2.2.3.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script type="text/javascript">
    var data=new Array();
    var myChart
    setTimeout(function() {
            Push();
        },
        200);
    /*30轮询读取函数*/
    setInterval(function() {
            Push();
        },
        300);
    /*请求函数的ajax*/
    function Push() {
        $.ajax({
            url:"../account/getpoint",
            type:"get",
            dataType:"json",
            async:true,
            success:function (da){
                var html="";
                var length=data.length
                $.each(da,function (n,a) {
                    data[length+n]=new Array();
                    data[length+n][0]=a.x;
                    data[length+n][1]=a.y;
                    html+=a.id+","+a.x+","+a.y+"\n"
                })
                var option=myChart.getOption();
                option.series[0].data=data;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                    myChart.clear()
                    myChart.setOption(option, true);
                }
            },
            error:function (da){
                //alert("错误")
            }
        })

            }
    $(function (){
        myChart = echarts.init(document.getElementById('main'));
        var app = {};
        option = null;
        var symbolSize = 10;
        var points = [];

        option = {
            title: {
                text: '定位坐标'
            },
            tooltip: {
                formatter: function (params) {
                    var data = params.data || [0, 0];
                    return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                min: -60,
                max: 2000,
                type: 'value',
                axisLine: {onZero: false}
            },
            yAxis: {
                min: 0,
                max: 2000,
                type: 'value',
                axisLine: {onZero: false}
            },
            series: [
                {
                    id: 'a',
                    type: 'line',
                    smooth: true,
                    animation:false,
                    symbolSize: symbolSize,
                    data: data
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
            myChart.clear()
            myChart.setOption(option, true);
        }
        $("#btn").click(function (){
           data=new Array()
        })
    })
    // 使用刚指定的配置项和数据显示图表。
</script>
<body>
<h2>成功</h2>
<button id="btn">清空图标</button>
<button id="btn2">设置</button>
<button id="btn3">刷新图标</button>
<div id="main" style="width: 1000px; height: 1000px;">
    <img src="../image/jubu.jpg" width="100%">
</div>
<c:forEach items="${list}" var="account">
${account.name}
</c:forEach>
<div id="xianshi"></div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
</body>
</html>